import React from 'react'
import Link from '../ui-components/link'
import '../containers/app/common'
import style from '../ui-page/style.app'
import { Nav, IconFont } from '../ui-components'


const item = ({label, to, active}) => <Link active={~location.hash.indexOf(to) && active} to={`#/${to}`}>{label}</Link>

class App extends React.Component {
	render() {
		return (
			<div className={style.root}>
        <div className={style.logo}>Utility</div>
				<div
					className={style.nav}
				>
					<div>
						<p>基础</p>
						<Nav
							data={
								[
									[
										{label: 'type', to: 'type'},
										{label: 'isObjec', to: 'is-object'},
									]
								]
							}
							item={item}
						/>
					</div>
					<div>
						<p>数组</p>
						<Nav
							data={
								[
									[
										{label: 'last', to: 'last'},
									]
								]
							}
							item={item}
						/>
					</div>
					<div>
						<p>对象</p>
						<Nav
							data={
								[
									[
										{label: 'isObjectEmpty', to: 'is-object-empty'},
									]
								]
							}
							item={item}
						/>
					</div>
					<div>
						<p>复合</p>
						<Nav
							data={
								[
									[
										{label: 'isShallowEqual', to:'is-shallow-equal'},
										{label: 'isNull', to:'is-null'}
									]
								]
							}
							item={item}
						/>
					</div>
				</div>
				<div className={style.content}>{ this.props.children }</div>
			</div>
		)
	}
}

export default App
